<template>
    <div :class="isEnable?'btn':'ebtn'" @click="click" >
        <span class="point" v-show="isEnable"></span>
        <span class="text" >{{ msg }}</span>
        <span class="close" @click="closeClick">×</span>
    </div>
</template>

<script>


export default ({
    name:'MyBreadcrumb',
    props:{
        isEnable:Boolean,
        msg:String
    },
    data(){
        return{
            
        }
    },
    methods:{
        closeClick(){
            this,this.$emit('closeClick')
        },
        click(){
            this,this.$emit('bclick')
        }
    }
})
</script>

<style scoped>
.btn{
    border: 1px solid #d1dbe5;
    padding: 1px;
    text-align: center;
    justify-content: center !important;
    align-items: center !important;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 4px;
    line-height: 2;
    background-color: #42b983;
    color:#fff;
    float: left;
}

.ebtn{
    border: 1px solid #d1dbe5;
    padding: 1px;
    text-align: center;
    justify-content: center !important;
    align-items: center !important;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 4px;
    line-height: 2;
    color:#000;
    float: left;
}

div:hover{
    /* background-color: rgba(128, 120, 120, 0.9); */
    cursor: pointer;/**更改鼠标样式 */
    opacity: 0.6;/**透明度 */
}

.text{
    margin:10px 5px;
    line-height: 36px;
}

.point{
    background-color: #fff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    float: left;
    margin:10px 5px;
}

.close{
    padding: auto;
    margin:13px 10px;
}

.close:hover{
    
    cursor: pointer;/**更改鼠标样式 */
    opacity: 0.2;
}
</style>